<template>
  <el-affix :offset="16" style="height: 74px; width: 100%">
    <div class="btn-container">
      <el-button type="primary" @click="() => (drawer = true)"> 查看 JSON </el-button>
      <el-button type="primary" @click="saveProcess"> 保存 </el-button>
      <el-button type="primary" @click="saveAsPng"> 保存图片 </el-button>
      <div class="slider">
        <el-button type="primary" icon="el-icon-minus" style="margin-right: 16px; width: 32px" @click="zoom -= 0.1" />
        <el-slider v-model="zoom" :marks="marks" :min="0.1" :max="5" :step="0.1" height="200px" />
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px; width: 32px" @click="zoom += 0.1" />
      </div>
    </div>
  </el-affix>
  <div class="affix-container" :style="`transform: scale(${zoom})`" style="transform-origin: 0 0">
    <sc-workflow class="workflow" ref="workflowRef" id="content-to-capture" v-model="data.nodeConfig" />
    <el-drawer v-model="drawer" size="500px" class="drawer" :append-to-body="true" :modal="false" :with-header="false">
      <div style="height: 100vh">
        <div style="padding: 1px; background-color: #3883fa">
          <el-button type="primary" plain @click="copyParseJson"> 复制格式化后的 JSON </el-button>
          <el-button type="primary" plain @click="copyJson"> 复制压缩后的 JSON </el-button>
          <el-button type="primary" plain @click="drawer = false"> 关闭弹窗 </el-button>
        </div>
        <json-editor-vue class="editor" language="zh-CN" current-mode="view" v-model="data" />
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
  import { ElMessage } from 'element-plus';
  import { ref, reactive, onMounted } from 'vue';
  import html2canvas from 'html2canvas';
  import useClipboard from 'vue-clipboard3';
  import scWorkflow from '@/components/scWorkflow/index.vue';
  import { saveFlwProcess, getById } from '@/api/process';
  const zoom = ref(1);
  const marks = reactive({
    0.1: 'min',
    1: '1',
    2: '2',
    3: '3',
    4: '4',
    5: 'max',
  });

  const drawer = ref(false);

  const data = ref({
    id: 1,
    name: '请假审批',
    key: 'k0001',
    nodeConfig: {
      nodeName: '发起人',
      nodeKey: 'flk0001',
      type: 0,
      nodeAssigneeList: [],
    },
  });

  const { toClipboard } = useClipboard();

  const copyParseJson = async () => {
    await toClipboard(JSON.stringify(data.value, null, '  '));
  };

  const copyJson = async () => {
    await toClipboard(JSON.stringify(data.value));
  };

  const handleWeel = (e) => {
    e.preventDefault();
    if (e.wheelDelta < 0) {
      zoom.value -= 0.1;
    } else {
      zoom.value += 0.1;
    }

    if (zoom.value <= 0.1) {
      zoom.value = 0.1;
    } else if (zoom.value >= 5) {
      zoom.value = 5;
    }
  };

  const saveAsPng = async () => {
    const element = document.getElementById('content-to-capture');
    element.parentElement.style.transform = 'scale(1)';
    const canvas = await html2canvas(element, {
      backgroundColor: '#efefef',
    });
    const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
    let link = document.createElement('a');
    link.download = `flowlong-${Date.now()}.png`;
    link.href = image;
    link.click();
  };
  // -----保存流程----
  const processName = ref('');
  const processId = ref('');
  const modelContent = ref('');
  const saveProcess = async () => {
    const params = {
      id: processId.value,
      processName: processName.value,
      modelContent: JSON.stringify(data.value),
    };
    const res = await saveFlwProcess(params);
    if (res.code == 0) ElMessage.success('保存成功');
  };
  // 获取流程json串
  const getProcessJson = async (id) => {
    const params = {
      id: id,
    };
    const res = await getById(params);
    console.log('getProcessJson----res', res);
    if (res.code == 0) {
      if (res.data != 'null') {
        let jsonStr = JSON.parse(decodeURI(res.data)); // 解析json串
        Object.assign(jsonStr, { id: id });
        modelContent.value = jsonStr;
        data.value = jsonStr;
      }
    } else {
      ElMessage.error('获取流程失败');
    }
  };
  onMounted(() => {
    // 获取流程id和流程名称
    let arr = location.search.split('?processName=');
    console.log('arr---', location, arr);
    processName.value = decodeURI(arr[1]);
    processId.value = arr[0].split('?processId=')[1];
    console.log('processName--processId---', processName.value, processId.value);
    getProcessJson(processId.value);
  });
</script>

<style>
  :root {
    --el-drawer-padding-primary: 0;
  }

  body {
    margin: 0;
    background-color: #efefef;
  }

  .affix-container {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
  }

  .editor {
    width: 500px;
    height: calc(100vh - 36px);
  }

  .editor .jsoneditor-poweredBy,
  .editor .jsoneditor-transform,
  .editor .jsoneditor-repair,
  .editor .full-screen {
    display: none !important;
  }

  .workflow {
    padding: 10px;
  }

  .jsoneditor-menu > button.jsoneditor-copy {
    background-position: -48px 0px;
  }

  .el-drawer__body {
    padding: 0 !important;
  }

  .btn-container {
    display: flex;
    height: 42px;
    margin-left: 16px;
  }

  .slider {
    margin-left: 16px;
    width: 300px;
    display: flex;
  }
</style>
